<!-- 
  @author : andy
  @description : 子菜单组件
-->
<template>
  <a-sub-menu :key="menu.code">
    <template #icon>
      <img  v-if="menu.icon" class="menu-icon" :src="menu.icon" />
    </template>
    <template #title>{{menu.name}}</template>
    <template v-for="item in menu.children" :key="item.code">
      <template v-if="!item.children || item.children.length === 0">
        <a-menu-item :key="item.code">
          <template #icon>
            <img  v-if="menu.icon" class="menu-icon" :src="item.icon" />
          </template>
          {{item.name}}
        </a-menu-item>
      </template>
      <template v-else>
        <SubMenu :menu="item" />
      </template>
    </template>
  </a-sub-menu>
</template>

<script lang='ts' setup>
import type { AccessMenuItem } from '@/stores/access/types';
import SubMenu from './SubMenu.vue';
type Props = {
  menu: AccessMenuItem;
}
defineProps<Props>();
</script>

<style lang='less' scoped>
.menu-icon {
  width: 0.16rem;
  height: 0.16rem;
  object-fit: cover;
  transition: all 0.3s;
}
</style>